<!--
  使用：
  <select-sort @event="fun"></select-sort>
  event: 接收选择回调函数
  -->
<template>
  <el-select v-model="gradeId" @change="bindChange">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
</template>
<script>
export default {
  data () {
    return {
      options: [{
        id: 0,
        name: '本科'
      }, {
        id: 1,
        name: '专科'
      }],
      gradeId: 0
    }
  },
  methods: {
    bindChange () {
      this.$emit('event', this.gradeId)
    }
  }
}
</script>

<style scoped lang="scss">
  /deep/ {
    .el-input__inner{
      border:none;
      border-radius:100px;
      color:#69707F;
      background:#F7F7FB;
      padding-left:20px;
      padding-right:35px;
    }
    .el-input__suffix{
      right:10px;
    }
    .el-select__caret{
      color:#69707F
    }
  }
  .el-select-dropdown__item.selected{
    color:$positive;
  }
</style>
